<template>
  <div class="flex flex-col min-h-screen">
    <NavBar />
    <main class="flex-grow">
      <RouterView v-slot="{ Component }">
        <transition
          name="page"
          mode="out-in"
          @before-leave="beforeLeave"
          @enter="enter"
          @after-enter="afterEnter"
        >
          <keep-alive>
            <component :is="Component" :key="$route.fullPath" />
          </keep-alive>
        </transition>
      </RouterView>
      <CommonDialog
        v-bind="dialogProps"
        @update:is-visible="updateVisible"
        @confirm="handleConfirm"
        @cancel="handleCancel"
      />
    </main>
    <AppFooter />
    <BackToTop />
    <DisclaimerModal />
  </div>
</template>

<script setup>
import { useScrollPosition } from './composables'
import { RouterView, useRoute } from 'vue-router'
import { defineAsyncComponent, watch, provide } from 'vue'
import NavBar from './components/NavBar.vue'
import { useDialog } from './composables/useDialog'
import { useTheme } from './composables/hooks/useTheme'
import { computed } from 'vue'
import { seoConfig } from './config/seo'

// 初始化主题
useTheme()

// 异步加载非关键组件
const AppFooter = defineAsyncComponent(() => import('./components/AppFooter.vue'))
const BackToTop = defineAsyncComponent(() => import('./components/BackToTop.vue'))
const DisclaimerModal = defineAsyncComponent(() => import('./components/DisclaimerModal.vue'))
const CommonDialog = defineAsyncComponent(() => import('./components/common/CommonDialog.vue'))

const route = useRoute()
const { scrollPosition } = useScrollPosition()

// 使用dialog
const dialog = useDialog()
provide('dialog', dialog) // 提供给子组件使用

const dialogProps = computed(() => ({
  isVisible: dialog.visible.value,
  title: dialog.config.value.title,
  message: dialog.config.value.message,
  type: dialog.config.value.type,
  showCancel: dialog.config.value.showCancel,
  showConfirm: dialog.config.value.showConfirm,
  cancelText: dialog.config.value.cancelText,
  confirmText: dialog.config.value.confirmText,
  showContact: dialog.config.value.showContact
}))

// 对话框事件处理
const handleConfirm = () => dialog.confirm()
const handleCancel = () => dialog.cancel()
const updateVisible = (value) => {
  if (!value) dialog.close()
}

// 更新 meta 标签
const updateMetaTags = (path) => {
  const pageName = path.slice(1) || 'home'
  const pageConfig = seoConfig.pages[pageName] || {}
  
  // 更新标题
  document.title = pageConfig.title || seoConfig.defaultTitle

  // 更新 meta 描述
  const metaDescription = document.querySelector('meta[name="description"]')
  if (metaDescription) {
    metaDescription.setAttribute('content', pageConfig.description || seoConfig.defaultDescription)
  }

  // 更新 Open Graph meta 标签
  const ogTitle = document.querySelector('meta[property="og:title"]')
  const ogDescription = document.querySelector('meta[property="og:description"]')
  const ogImage = document.querySelector('meta[property="og:image"]')
  const ogUrl = document.querySelector('meta[property="og:url"]')

  if (ogTitle) ogTitle.setAttribute('content', pageConfig.title || seoConfig.defaultTitle)
  if (ogDescription) ogDescription.setAttribute('content', pageConfig.description || seoConfig.defaultDescription)
  if (ogImage) ogImage.setAttribute('content', pageConfig.image || seoConfig.defaultImage)
  if (ogUrl) ogUrl.setAttribute('content', pageConfig.url || seoConfig.siteUrl)
}

// 监听路由变化
watch(() => route.path, (newPath) => {
  updateMetaTags(newPath)
}, { immediate: true })

function beforeLeave() {}
function enter() {}
function afterEnter() {}
</script>

<style>
@import './styles/global.css';

:root {
  color-scheme: light dark;
}

/* Global click animation for buttons and interactive elements */
button,
[role="button"],
.interactive {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

button:active,
[role="button"]:active,
.interactive:active {
  transform: scale(0.95);
}

/* Ripple effect */
button::after,
[role="button"]::after,
.interactive::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: currentColor;
  opacity: 0;
  border-radius: 100%;
  transform: scale(1) translate(-50%, -50%);
  transform-origin: 50% 50%;
}

button:active::after,
[role="button"]:active::after,
.interactive:active::after {
  animation: ripple 0.4s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0) translate(-50%, -50%);
    opacity: 0.4;
  }
  100% {
    transform: scale(40) translate(-50%, -50%);
    opacity: 0;
  }
}

/* Page transitions */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.3s ease;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
}

/* Hover lift effect */
.hover-lift {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

/* Focus styles */
button:focus-visible,
[role="button"]:focus-visible,
.interactive:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
</style>